<template>
    <div class="step-container">
        <div class="step-layout">
            <div class="step-nav">
                <van-steps direction="vertical" :active="currentStep" class="custom-steps">
                    <van-step v-for="(step, index) in stepArray" :key="index">
                        <template #title>
                            <span class="step-title">{{ step.title }}</span>
                        </template>
                    </van-step>
                </van-steps>
            </div>

            <div class="step-content">
                <div class="content-header">
                    <h2 class="main-title">{{ stepArray[currentStep].title }}</h2>
                    <div class="progress-info">
                        <span class="step-progress">{{ currentStep + 1 }}/{{ stepArray.length }}</span>
                    </div>
                </div>

                <div class="form-layout">
                    <div class="form-info">
                        <p class="description">{{ stepArray[currentStep].desc }}</p>
                        <p class="sub-title">{{ stepArray[currentStep].subTitle }}</p>
                    </div>

                    <div class="form-area">
                        <!-- 根据不同步骤显示不同的表单内容 -->
                        <template v-if="currentStep === 0">
                            <van-field v-model="formData.doctor" label="选择医生" placeholder="请选择主诊医生" />
                        </template>
                        <template v-else-if="currentStep === 1">
                            <van-field v-model="formData.diagnosis" label="疾病诊断" placeholder="请添加疾病诊断" />
                        </template>
                        <template v-else-if="currentStep === 2">
                            <van-field v-model="formData.patient" label="随访人" placeholder="请选择随访人" />
                        </template>
                        <template v-else-if="currentStep === 3">
                            <van-field v-model="formData.contact" label="联系方式" type="tel" placeholder="请输入联系电话" />
                        </template>
                        <template v-else-if="currentStep === 4">
                            <van-field v-model="formData.family" label="家属信息" placeholder="请输入家属联系方式" />
                        </template>
                    </div>
                </div>

                <div class="button-group">
                    <van-button v-if="currentStep > 0" type="default" class="prev-button" @click="prevStep">上一步</van-button>
                    <van-button type="primary" class="next-button" @click="nextStep">{{ currentStep === stepArray.length - 1 ? '完成' : '下一步' }}</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";

const stepArray = ref([{
    title: "选择医生",
    desc: "选择登记医生，选中医生后点击下一步;",
    subTitle: " 选定主诊医生，加入随访名单，方便医生跟踪病情及查看资料。"
},
{
    title: "诊断信息",
    desc: "请添加疾病诊断，添加后点击保存;",
    subTitle: "选择疾病诊断，方便医生管理，并获取小程序相关疾病知识。"
}, {
    title: "随访人",
    desc: "选择需要登记的随访人，选中后点击下一步;",
    subTitle: "选定随访对象，便于医生随访跟进。"
},
{
    title: "联系方式",
    desc: "请输入本人联系方式，选中后点击下一步;",
    subTitle: "请准确填写联系电话，以便我们定期随访。"
}, {
    title: "家属信息",
    desc: "请添加家属信息，添加确认后点击下一步;",
    subTitle: "添加家属联系方式，确保随访畅通无阻。"
}
]);

const currentStep = ref(0);
const formData = ref({
    doctor: '',
    diagnosis: '',
    patient: '',
    contact: '',
    family: ''
});

const nextStep = () => {
    if (currentStep.value < stepArray.value.length - 1) {
        currentStep.value++;
    } else {
        // 提交表单逻辑
        console.log('表单提交', formData.value);
    }
};

const prevStep = () => {
    if (currentStep.value > 0) {
        currentStep.value--;
    }
};
</script>

<style>
.step-container {
    padding: 20px;
    background: #fff;
    min-height: 100vh;
}

.step-layout {
    display: flex;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.step-nav {
    width: 200px;
    flex-shrink: 0;
}

.custom-steps {
    height: 100%;
}

.step-title {
    font-size: 16px;
    font-weight: bold;
}

.step-content {
    flex: 1;
    min-width: 0;
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.main-title {
    font-size: 24px;
    color: #323233;
    margin: 0;
}

.progress-info {
    color: #969799;
    font-size: 14px;
}

.form-layout {
    display: flex;
    gap: 32px;
    margin-bottom: 32px;
}

.form-info {
    width: 240px;
    flex-shrink: 0;
}

.description {
    font-size: 16px;
    color: #646566;
    margin-bottom: 12px;
    line-height: 1.5;
}

.sub-title {
    font-size: 14px;
    color: #969799;
    margin: 0;
}

.form-area {
    flex: 1;
    min-width: 0;
    padding: 24px;
    background: #f7f8fa;
    border-radius: 8px;
}

.button-group {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

.prev-button,
.next-button {
    width: 120px;
    height: 44px;
    font-size: 16px;
}

</style>
